<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width" />
		<title>header</title>
		<!--<link rel="stylesheet" type="text/css" href="../css/common.min.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
			}
			
			#wrap {
				height: 100%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			
			#main {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.mui-tab-item {
				background-color: #3E9FEC;
				padding: 15px;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				line-height: 0px;
			}
			
			.mui-bar-tab .normal {
				height: 30px;
				background-color: #3E9FEC;
				position: absolute;
				bottom: 0px;
				width: 18%;
				float: left;
			}
			
			.mui-bar-tab .big {
				/*height: 100%;*/
				background-color: #3E9FEC;
				width: 28%;
			}
			
			#footer a {
				background-color: #3E9FEC;
				background-size: auto 44px;
				background-repeat: no-repeat;
				background-position: center;
			}
			
			#prev {
				background: url(../image/prev.png);
			}
			
			#showanswer {
				background-image: url(../image/show_answer.png);
			}
			
			#page {
				background-image: url(../image/button-background.png);
			}
			
			#favor {
				background-image: url(../image/favour.png);
			}
			
			#next {
				background-image: url(../image/next.png);
			}
		</style>
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<div id="wrap">
			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-pull-lefty" onclick="api.closeWin()"><img src="../image/cancle.png" style="height: 24px;" /></a>
				<h1 class="mui-title">全部练习</h1>
				<a class="mui-icon mui-pull-right" onclick="api.closeWin()"><img src="../image/ok.png" style="height: 24px;" /></a>
			</header>
			<div id="main">
			</div>
			<nav class="mui-bar mui-bar-tab" id="footer" style="background-color: #000000;height: 44px;">
				<a class="mui-tab-item" id="prev">
					<!--<img src="../image/prev.png" style="height: 100%;" />-->
				</a>
				<a class="mui-tab-item" id="showanswer" data-action="showAnswer">
					<!--<img class="pic" src="../image/show_answer.png" style="height: 100%;" />-->
				</a>
				<a class="mui-tab-item" id="page" style="font-size: 12px;background-image: url(../image/button-background.png);background-size:100%;background-repeat: no-repeat;color:#2681ba;">
					<span id="pageno"></span>/<span id="total"></span>
				</a>
				<a class="mui-tab-item" id="favor">
				</a>
				<a class="mui-tab-item" id="next">
				</a>
			</nav>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function openSelectPage(data) {
			api.sendEvent({
				name: "PageIndexTouched"
			});
			var main_h = $api.offset($api.byId('main')).h;
			api.sendEvent({
				name: "pageButtonTouched"
			});
			api.openFrame({
				bounces: false,
				bgColor: 'rgba(0,0,0,0.5)',
				name: 'mask',
				url: 'mask.html',
				rect: {
					x: 0,
					y: 0,
					w: 'auto',
					h: main_h
				}
			});
			api.openFrame({
				bounces: false,
				name: 'page',
				url: 'selectPage.html',
				pageParam:data,
				bgColor: 'rgba(255,255,255,0)',
				rect: {
					x: 0,
					y: 80,
					w: 'auto',
					h: 'auto'
				}
			});
			api.addEventListener({
				name: 'maskTouched'
			}, function(ret, err) {
				api.setFrameAttr({
					name: 'page',
					hidden: true
				});
				api.setFrameAttr({
					name: 'mask',
					hidden: true
				});
			});
			//遮罩层点击
		}
		apiready = function() {
			var data = api.pageParam;
//									alert(JSON.stringify(data));
			var header = $api.byId('header');
			$api.fixIos7Bar(header);
			var header_h = $api.offset(header).h;
			var footer = $api.byId('footer');
			var footer_h = $api.offset(footer).h
			var main = $api.byId('main');
			var main_h = $api.offset(main).h;
			var rect_h = main_h - header_h - footer_h;
			api.openFrame({
				bounces: false,
				name: 'practise-con',
				url: 'practise-con.html',
				pageParam: data,
				rect: {
					x: 0,
					y: header_h,
					w: 'auto',
					h: rect_h
				}
			});
			document.getElementById("prev").addEventListener('tap', function() {
				api.sendEvent({
					name: 'slidePrev'
				});
			});
			document.getElementById("next").addEventListener('tap', function() {
				api.sendEvent({
					name: 'slideNext'
				});
			});
			document.getElementById("showanswer").addEventListener('tap', function() {
				var action = this.getAttribute('data-action');
				api.sendEvent({
					name: action
				});
				if (action == "showAnswer") {
					//					this.getElementsByClassName("pic")[0].src = "../image/answer.png";
					this.style.backgroundImage = "url(../image/answer.png)";
					this.setAttribute('data-action', 'Answer');
				} else {
					//					this.getElementsByClassName("pic")[0].src = "../image/show_answer.png";
					this.style.backgroundImage = "url(../image/show_answer.png)";
					this.setAttribute('data-action', 'showAnswer');
				}
			});
			api.addEventListener({
				name: 'slideChange'
			}, function(ret, err) {
				var obj = document.getElementById("showanswer");
				obj.style.backgroundImage = "url(../image/show_answer.png)";
				//				obj.getElementsByClassName("pic")[0].src = "../image/show_answer.png";
				obj.setAttribute('data-action', 'showAnswer');
				if (ret && ret.value) {
					var value = ret.value;
					document.getElementById("pageno").innerHTML = value.pageno;
					document.getElementById("total").innerHTML = value.total;
					//					alert(value.key1 + ' , ' + value.key2);     
				}
			});
			api.addEventListener({
				name: 'showAnswer'
			}, function(ret, err) {
				var obj = document.getElementById("showanswer");
				obj.style.backgroundImage = "url(../image/answer.png)";
				obj.setAttribute('data-action', 'Answer');

			});
			document.getElementById("favor").addEventListener('tap', function() {
				api.sendEvent({
					name: "favor"
				});
			});
			document.getElementById("page").addEventListener('tap', function() {
				openSelectPage(data);
			});
			api.addEventListener({
				name: 'testEnd'
			}, function(ret, err) {
				openSelectPage();
			});
		}
	</script>

</html>